<template>
  <div class="popup" @click="hide" :class="{show: conf.show, active: active}" @transitionend="transitionEnd">
    <slot/>
  </div>
</template>
<script>
/**
 * conf.show 开启|关闭i弹窗
 * conf.hide 初始化之后调用 关闭弹窗， 弹窗组件内部实现，供外界调用
 * */
export default {
  name: 'popup',
  props: ["conf"],
  data() {return {active: false}},
  computed: {},
  mounted() {
    this.syncShowActive();
    this.setConfHide();
  },
  methods: {
    setConfHide(){
      this.conf.hide = () => this.hide();
    },
    hide() {
      this.active = false;
    },
    syncShowActive(){
      setTimeout(() => (this.active = this.conf.show),0);
    },
    transitionEnd () {
      this.conf.show = this.active;
    },
  },
  watch: {
    conf(){this.setConfHide()},
    "conf.show"(){
      this.syncShowActive();
    },
  },
}
</script>

<style scoped>
  .popup {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0);
    opacity: 0;
    transition: all .3s;
  }
  .popup.show{
    display: block;
  }
  .popup.show.active{
    background-color: rgba(0, 0, 0, .3);
    opacity: 1;
  }
</style>
